<template>
  <div>
    <el-row :gutter="10" class="containerView">
      <!--table-->
      <el-col :span="24" :xs="24" class="mainHeight">
        <el-card shadow="always" class="mainHeight">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
          >
            <!-- <el-form-item label="" prop="keyword">
              <el-select
                @change="changeSelectHandle"
                v-model="queryParams.senseId"
                placeholder="请选择所属区域"
              >
                <el-option
                  v-for="item in senceList"
                  :key="item.senseId"
                  :label="item.name"
                  :value="item.senseId"
                >
                </el-option>
              </el-select>
            </el-form-item> -->

            <el-form-item style="float: right">
              <el-button
                @click="reset"
                plain
                icon="el-icon-refresh"
                size="small"
                >刷新</el-button
              >
              <el-button
                @click="addHandle"
                type="primary"
                size="small"
                icon="el-icon-plus"

                >添加</el-button
              >
            </el-form-item>
          </el-form>

          <el-table
            v-loading="loading"
            :data="tableList"
            height="67vh"

            style="width: 100%"
            default-expand-all
          >
            <!-- <el-table-column

              label="收款账户id"
              prop="id"
              :show-overflow-tooltip="true"
            >

            </el-table-column> -->
            <el-table-column

              label="收款账户名称"
              prop="name"
              :show-overflow-tooltip="true"
            >

            </el-table-column>
            <el-table-column

              label="账户类型"
              prop="type"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                {{scope.row.type == 0 ? '对公' : '对私'}}
              </template>
            </el-table-column>
             <el-table-column

              label="货币类型"
              prop="currency"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                {{scope.row.currency.name}}
              </template>
            </el-table-column>

              <el-table-column

              label="银行名称"
              prop="bank_name"
              :show-overflow-tooltip="true"
            >

            </el-table-column>
             <el-table-column

              label="银行账户"
              prop="bank_account"
              :show-overflow-tooltip="true"
            >

            </el-table-column>
             <el-table-column

              label="余额"
              prop="balance"
              :show-overflow-tooltip="true"
            >

            </el-table-column>
            <el-table-column

              label="已存金额"
              prop="income_amount"
              :show-overflow-tooltip="true"
            >

            </el-table-column>
            <el-table-column

              label="已取金额"
              prop="expend_amount"
              :show-overflow-tooltip="true"
            >

            </el-table-column>

            <el-table-column
              label="操作"

              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="updateHandle(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  class="text-danger"
                  type="text"
                  size="mini"
                  @click="deleteHandle(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page"
            :limit.sync="queryParams.page_size" @pagination="getOrderStatusesListHandle" /> -->
        </el-card>
        <el-dialog
          :title="editShow ? '编辑收款账户' : '添加收款账户'"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          destroy-on-close
          width="800px"
        >
          <el-form
            :rules="formRules"
            ref="elForm"
            :model="formData"
            class="my-form"
            size="medium"
            label-width="120px"
          >
            <el-row>
              <el-col span="12">
                <el-form-item label="收款账户名称" prop="name">
                  <el-input
                    v-model="formData.name"
                    placeholder="请输入名称"
                    clearable
                    style="width: 100%"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="账户类型" prop="type">
                  <el-select
                    v-model="formData.type"
                    placeholder="请选择账户类型"
                    clearable
                    style="width: 100%"
                  >
                    <el-option label="对公" value="0"></el-option>
                    <el-option label="对私" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="货币类型" prop="currency_id">
                  <el-select
                    v-model="formData.currency_id"
                    placeholder="请选择货币类型"
                    clearable
                    style="width: 100%"
                  >
                    <!-- 这里需根据实际货币类型补充 el-option -->
                    <el-option
                      v-for="item in currencyList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="开户银行" prop="bank_name">
                  <el-input
                    v-model="formData.bank_name"
                    placeholder="请输入开户银行"
                    clearable
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="银行账户" prop="bank_account">
                  <el-input
                    v-model="formData.bank_account"
                    placeholder="请输入银行账户"
                    clearable
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">取消</el-button>
            <el-button size="small" type="primary" @click="addCardStylesHandle"
              >确定</el-button
            >
          </div>
        </el-dialog>


      </el-col>
    </el-row>
  </div>
</template>

<script>
import { accountsList, addAccounts,currenciesList,editAccounts,delAccounts } from "@/api/finance";

import { getToken } from "@/utils/auth";
export default {
  name: "Customer",
  data() {
    return {
      filterText: "",
      // 遮罩层
      loading: false,
      showSearch: true,
      // 总条数
      total: 0,

      // 查询参数
      queryParams: {
        page: 1,
        page_size: 15,
      },

      tableList: [],
      senceList: [],
      areaList: [],
      editShow: false,
      formData: {
        id: "",
        name: "",
        type: "",
        currency_id: "",
        bank_name: "",
        bank_account: "",
      },
      formRules: {
        name: [{ required: true, trigger: "blur", message: "请输入收款账户名称" }],
        type: [{ required: true, trigger: "change", message: "请选择账户类型" }],
        currency_id: [{ required: true, trigger: "change", message: "请选择货币类型" }],
        bank_name: [{ required: true, trigger: "blur", message: "请输入开户银行" }],
        bank_account: [{ required: true, trigger: "blur", message: "请输入银行账户" }],
      },
      dialogVisible: false,
      updateShow: false,
      updateForm: {
        areaId: "",
        rule: {
          spray: 0,
          identify: 0,
          interval: 0,
        },
        ruleEnable: true,
        syncAll: false,
        syncSame: false,
      },
      newAreaList: [],
      ruleLoading: false,
      actionUrl: "",
      header: {
        Authorization: "Bearer " + getToken(),
      },
      currencyList:[]
    };
  },
  watch: {},
  created() {
    this.accountsListHandle()
    this.currenciesListHandle()
  },
  methods: {
    currenciesListHandle() {
      currenciesList().then((res) => {
        this.currencyList = res.data;
      });
    },
    addCardStylesHandle() {
      this.$refs.elForm.validate((valid) => {
        if (valid) {
          if (!this.editShow) {
              addAccounts(this.formData).then((res) => {
              this.$message.success("添加成功");
              this.dialogVisible = false;
              this.accountsListHandle();
            });
            return;
          }else{
            editAccounts(this.formData).then((res) => {
              this.$message.success("更新成功");
              this.dialogVisible = false;
              this.accountsListHandle();
            });
            return;
          }

        }
      });
    },
    handleAvatarSuccess(res, file) {
      let that = this;
      that.formData.image = res.path;
      that.Imgurl = res.url;
      that.$forceUpdate(); // 强制更新视图
    },
    beforeAvatarUpload(file) {},
    accountsListHandle() {
      this.loading = true;
      accountsList(this.queryParams).then((res) => {
        this.tableList = res.data;
        // this.total=res.meta.total
        this.loading = false;
      }).catch((error) => {
        this.loading = false;

       }) ;
    },




    // deleteHandle(row) {
    //   this.$modal
    //     .confirm("是否确认删除此条数据？")
    //     .then(async () => {
    //       const { code } = await  delFeeTypes({
    //         id: row.id,
    //       });
    //       this.$message.success("删除成功");
    //       this.feeTypesListHandle();
    //     })
    //     .then(() => {})
    //     .catch(() => {});
    // },

    updateHandle(cell) {
      this.editShow = true;
      let data = JSON.parse(JSON.stringify(cell));
      this.formData.name = data.name;
      this.formData.id = data.id
      this.formData.type =String(data.type)
      if(data.currency){
        this.formData.currency_id = data.currency.id
      }else{
        this.formData.currency_id=""
      }

      this.formData.bank_name = data.bank_name
      this.formData.bank_account = data.bank_account
      this.dialogVisible = true;
    },
    addHandle() {
      this.editShow = false;
      this.dialogVisible = true;
      this.formData = {
        id: "",
        name: "",
        type: "",
        currency_id: "",
        bank_name: "",
        bank_account: "",
      };
    },



    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (this.queryParams.paper_type == data.id) {
        this.queryParams.paper_type = undefined;
      } else {
        this.queryParams.paper_type = data.id;
      }

      this.handleQuery();
    },

    // 表单重置
    reset() {
      this.queryParams = {
        page: 1,
        page_size: 15
      };

      this.accountsListHandle();
    },


    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download(
        "system/user/importTemplate",
        {},
        `user_template_${new Date().getTime()}.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },

    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    handleImageError(event) {
      console.error("图片加载失败:", event.target.src);
      this.$message.error("图片加载失败，请检查图片地址或网络连接");
    },
  },
};
</script>
<style scoped scss>
@import url("~@/assets/styles/dialog_wangpx.scss");
.th {
  word-break: break-word;
  background-color: #f8f8f9;
  color: #515a6e;
  font-weight: 700;
  height: 40px;
  font-size: 13px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #dfe6ec;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
}
</style>
